Angular Material Dialog (ডায়ালগ) একটি অত্যন্ত গুরুত্বপূর্ণ UI কম্পোনেন্ট যা পপ-আপ উইন্ডো তৈরি করতে ব্যবহৃত হয়। এটি ব্যবহারকারীদের কাছে অতিরিক্ত তথ্য, সতর্কতা, বা ব্যবহারকারীর ইনপুট গ্রহণ করতে সহায়ক। Angular Material এর MatDialog সার্ভিস ব্যবহার করে ডায়ালগ তৈরি এবং কনফিগার করা যায়। এখানে, আমরা বিস্তারিতভাবে ডায়ালগ তৈরি এবং কনফিগার করার প্রক্রিয়া আলোচনা করব।

ডায়ালগ তৈরি করার ধাপ

১. MatDialogModule ইমপোর্ট করা

প্রথমে, MatDialogModule মডিউলটি অ্যাঙ্গুলার অ্যাপ্লিকেশনে ইমপোর্ট করতে হবে। এটি আপনার app.module.ts ফাইলে অন্তর্ভুক্ত করতে হবে।

import { MatDialogModule } from '@angular/material/dialog';

@NgModule({
  imports: [
    MatDialogModule
  ]
})
export class AppModule { }

২. Dialog কম্পোনেন্ট তৈরি করা

আপনার ডায়ালগের কন্টেন্ট হবে একটি কম্পোনেন্ট। প্রথমে একটি নতুন কম্পোনেন্ট তৈরি করুন যা ডায়ালগ হিসাবে কাজ করবে।

ng generate component dialog-example

এই কম্পোনেন্টের HTML ফাইলের মধ্যে ডায়ালগের কন্টেন্ট থাকবে:

<!-- dialog-example.component.html -->
<h1 mat-dialog-title>Dialog Title</h1>
<div mat-dialog-content>
  This is the content of the dialog. You can pass dynamic data here.
</div>
<div mat-dialog-actions>
  <button mat-button mat-dialog-close>Close</button>
</div>

এখানে:

• mat-dialog-title: ডায়ালগের শিরোনাম।
• mat-dialog-content: ডায়ালগের মূল কন্টেন্ট।
• mat-dialog-actions: অ্যাকশন বা বাটন যা ডায়ালগের নিচে থাকে।

৩. Dialog ওপেন করা

আপনি যে কম্পোনেন্ট থেকে ডায়ালগ ওপেন করবেন, সেই কম্পোনেন্টে MatDialog সার্ভিস ব্যবহার করতে হবে।

প্রথমে, MatDialog সার্ভিস এবং ডায়ালগ কম্পোনেন্ট ইমপোর্ট করুন:

import { MatDialog } from '@angular/material/dialog';
import { DialogExampleComponent } from './dialog-example/dialog-example.component';

তারপর, যে কম্পোনেন্ট থেকে আপনি ডায়ালগ ওপেন করতে চান সেখানে MatDialog সার্ভিস ব্যবহার করুন:

import { Component } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { DialogExampleComponent } from './dialog-example/dialog-example.component';

@Component({
  selector: 'app-root',
  template: `<button mat-button (click)="openDialog()">Open Dialog</button>`
})
export class AppComponent {

  constructor(public dialog: MatDialog) {}

  openDialog() {
    this.dialog.open(DialogExampleComponent);
  }
}

এখানে openDialog() মেথডে DialogExampleComponent ডায়ালগ ওপেন করবে।

৪. Dialog থেকে ডেটা পাস করা

আপনি চাইলে ডায়ালগে ডেটা পাস করতে পারেন। open() মেথডের দ্বিতীয় আর্গুমেন্টে ডেটা পাস করা হয়।

openDialog() {
  this.dialog.open(DialogExampleComponent, {
    data: {
      message: 'Hello from the parent component!'
    }
  });
}

এখন, ডায়ালগ কম্পোনেন্টে এই ডেটা গ্রহণ করতে হবে। এর জন্য MAT_DIALOG_DATA ইনজেক্ট করতে হবে:

import { Component, Inject } from '@angular/core';
import { MAT_DIALOG_DATA } from '@angular/material/dialog';

@Component({
  selector: 'app-dialog-example',
  template: `<h1 mat-dialog-title>{{ data.message }}</h1>
             <div mat-dialog-actions>
               <button mat-button mat-dialog-close>Close</button>
             </div>`
})
export class DialogExampleComponent {
  constructor(@Inject(MAT_DIALOG_DATA) public data: any) {}
}

এখানে MAT_DIALOG_DATA ডায়ালগে পাস করা ডেটা অ্যাক্সেস করার জন্য ব্যবহৃত হয়।

৫. Dialog থেকে ফলাফল সংগ্রহ করা

আপনি চাইলে ডায়ালগ থেকে কিছু ফলাফল বা ইনপুট সংগ্রহ করতে পারেন। এটি করার জন্য afterClosed() মেথড ব্যবহার করতে হয়।

openDialog() {
  const dialogRef = this.dialog.open(DialogExampleComponent, {
    data: { message: 'Do you agree?' }
  });

  dialogRef.afterClosed().subscribe(result => {
    console.log('Dialog result: ', result);
  });
}

এখন, dialog-example.component.ts ফাইলে ডায়ালগের ভিতরে একটি বাটনে ক্লিক করলে ফলাফল ফেরত পাঠানো হবে:

import { Component, Inject } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';

@Component({
  selector: 'app-dialog-example',
  template: `<h1 mat-dialog-title>{{ data.message }}</h1>
             <div mat-dialog-actions>
               <button mat-button (click)="closeDialog('Yes')">Yes</button>
               <button mat-button (click)="closeDialog('No')">No</button>
             </div>`
})
export class DialogExampleComponent {
  constructor(
    public dialogRef: MatDialogRef<DialogExampleComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any
  ) {}

  closeDialog(result: string) {
    this.dialogRef.close(result);
  }
}

এখানে, যখন ব্যবহারকারী "Yes" বা "No" বাটনে ক্লিক করবেন, তখন afterClosed() মাধ্যমে সেই মান অ্যাপ্লিকেশনের মূল কম্পোনেন্টে ফিরে আসবে।

Dialog কনফিগারেশন অপশন

1. Dialog Width, Height এবং Position কাস্টমাইজ করা

   আপনি ডায়ালগের আকার এবং অবস্থান কাস্টমাইজ করতে পারেন। উদাহরণস্বরূপ:

   openDialog() {
     const dialogRef = this.dialog.open(DialogExampleComponent, {
       width: '400px',
       height: '300px',
       position: { top: '20px' }
     });
   }
   

2. Backdrop ক্লিক করে Dialog বন্ধ করা নিষেধ করা

   আপনি চাইলে disableClose সেট করে ডায়ালগটি ব্যাকগ্রাউন্ড ক্লিক করে বন্ধ হতে নিষেধ করতে পারেন:

   openDialog() {
     const dialogRef = this.dialog.open(DialogExampleComponent, {
       disableClose: true
     });
   }
   

3. Dialog অ্যাকশন এবং ক্লোজ কাস্টমাইজ করা

   আপনি mat-dialog-actions বিভাগে আরও কাস্টম বাটন ব্যবহার করতে পারেন, যেমন "Confirm", "Cancel" ইত্যাদি:

   <div mat-dialog-actions>
     <button mat-button mat-dialog-close>Cancel</button>
     <button mat-button (click)="confirm()">Confirm</button>
   </div>
   

Angular Material এর MatDialog কম্পোনেন্ট ব্যবহার করে পপ-আপ উইন্ডো তৈরি এবং কনফিগার করা সহজ এবং কার্যকর। এটি ব্যবহারকারীদের সাথে ইন্টারঅ্যাকশন করতে, অতিরিক্ত তথ্য প্রদর্শন করতে বা ইনপুট সংগ্রহ করতে সাহায্য করে। আপনি MatDialog সার্ভিস ব্যবহার করে ডায়ালগ ওপেন করতে পারেন এবং MAT_DIALOG_DATA এর মাধ্যমে ডেটা পাস ও গ্রহণ করতে পারেন। থিমিং, আকার এবং পজিশন কাস্টমাইজ করে আরও উন্নত পপ-আপ উইন্ডো তৈরি করা সম্ভব।